<template>
  <div id="amapContainer" ></div>
</template>
<script>
// 设置地图分布
import tool from "@/utils/tool";
export default {
  props: {
    list: {type: Array, default: () => {return []}}
  },
  data () {
    return {
      city: '028',
      map: null,
      center: [104.262024, 30.65694],
    }
  },
  mounted () {
    this.$nextTick(() => {
      tool.getLngLat((obj) => {
        // this.center = obj.lnglat
        this.init()
      })
    })
  },
  methods: {
    init () {
      this.map = new AMap.Map("amapContainer",{  //设置地图容器id
        viewMode:"2D",    //是否为3D地图模式
        zoom: 11,           //初始化地图级别
        center: this.center, //初始化地图中心点位置
        showLabel: true,
        showIndoorMap: false,
      })
      // this.showCurrentLocation()
      if(this.list.length > 0)
        this.setMaker(this.list)
    },
    showCurrentLocation () {
      if(typeof AMap === 'undefined') {
        return tool.err('地图加载失败')
      }
      let marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: this.center
      });
      marker.setMap(this.map);
    },
    setMaker (list) {
      // 添加点
      let _this = this
      // 创建 AMap.LabelsLayer 图层
      let layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        collision: false
      })
      // 将图层添加到地图
      this.map.add(layer);
      let markers = [];
      let icon = {
        type: 'image',
        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        size: [12, 15],
        anchor: 'bottom-center',
      }
      list.map(row => {
        let curPosition = [row.longitude, row.latitude]
        let curData = {
          position: curPosition,
          icon,
        }
        let labelMarker = new AMap.LabelMarker(curData)
        markers.push(labelMarker)
        // 给marker绑定事件
        labelMarker.on('mouseover', function(e){
          let position = e.data.data && e.data.data.position;
          if(position){
            normalMarker.setContent(
                '<div class="amap-info-window">'
                + row.name +
                '<div class="amap-info-sharp"></div>' +
                '</div>')
            normalMarker.setPosition(position)
            _this.map.add(normalMarker)
          }
        })
        //
        labelMarker.on('mouseout', function(){
          _this.map.remove(normalMarker);
        })
      })
      // 一次性将海量点添加到图层
      layer.add(markers)
      // 普通点
      let normalMarker = new AMap.Marker({
        anchor: 'bottom-center',
        offset: [0, -15],
      })
    }
  }
}
</script>
<style>
#amapContainer {
  width: calc(100vw - 40px);
  height: calc(100vh - 120px);
}
.amap-info-window{
  width: 150px;
  background: #fff;
  border-radius: 3px;
  padding: 3px 7px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: relative;
}
.amap-info-sharp{
  position: absolute;
  top: 21px;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
</style>
